<template>
    <!-- /phone/brand/${101}/ -->
    <div class="productItem-wrap">
        <el-card class="box-card" shadow="hover" @click.native="toProductDetail(item.productId)" :body-style="cardBodyStyle">
            <div class="item-img-wrap">
                <img :src="prefix + item.mainImg">
            </div>
            <div class="item-text-wrap">
                <el-link :underline="false">{{ item.name }}</el-link>
                <el-link type="info" :underline="false">{{ item.describe }}</el-link>
                <el-link type="warning" :underline="false">{{ item.price }}元起</el-link>
            </div>
        </el-card>
    </div>
</template>

<script>
    import settings from '@/settings'

    export default {
        name: "ProductItem",
        props:['item'],
        data(){
            return{
                prefix : settings.prefix || 'https://mall-resource-bucket.oss-cn-hangzhou.aliyuncs.com',// 全局前缀
                cardBodyStyle:{
                    padding: '0 5px',
                    height: '290px',
                    overflow: 'hidden',
                    cursor: 'pointer'
                },
            }
        },
        methods:{
            toProductDetail(productId){// 传参产品id并前往产品详情页
                console.log(productId)
                this.$router.push({ path: `/product/${productId}/`,})
            },
        },
        watch:{
        },
        beforeMount(){
            //console.log(this.$route.params.keyWord)
        },
    }
</script>


<style scoped>
    .productItem-wrap{
        width: calc(25% - 20px);
        margin: 10px 10px;
    }

    .item-img-wrap{
        margin: 0 auto 18px;
        width: 160px;
        height: 160px;
    }
    .item-img-wrap img{
        width: 160px;
        height: 160px;
    }
    .item-text-wrap{
        display: flex;
        flex-direction: column;
    }
    .item-text-wrap a{
        margin-bottom: 10px;
    }
    .item-text-wrap a:nth-child(2){
        margin-bottom: 20px;
    }
    >>>.el-link--inner{
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
    }


</style>
